<template>
  <section>

    <banner   class="banner-fixed" :imgList="imgList" :ratio="3.60"/>

    <div  v-show="helpList.length > 0">
      <h5 class="help-info">器材使用</h5>
      <ul class="help-list">
        <li v-for="item in helpList">
          <a  @click="forwardDetail(item)" href="javascript:void(0)" class="fx-row fx-row-center">
            <div class="bg-img-clip help-cover" :style="{backgroundImage:`url(${item.pic})`}"></div>
            <div class="fx">
              <h5 class="text-ellipsis help-title">{{item.equipmentName}}</h5>
              <p class="multi-ellipsis help-desc multi-3 text-color-light">
                {{item.intro}}
              </p>
            </div>
          </a>
        </li>

      </ul>

      <p class="text-center text-color-light help-tips">
        可以扫描器材上的二维码快速查看帮助
      </p>
    </div>
  </section>
</template>
<style lang="scss" scoped>
  @import "../../../common/skin/var";

  .help-info{
    font-size: 15px;
    color: $text-light-color;
    margin-bottom: 10px;
    padding-left: 10px;
    margin-top: 10px;
  }

  .help-tips{
    margin-top: 50px;
    margin-bottom: 20px;
  }
  .help-list{
      &>li{
        background: #fff;
        margin-bottom: 1px;
        &>a{
          padding: 10px;
        }
      }

    .help-cover{
      width: 85px;
      min-width: 85px;
      height: 75px;
      margin-right: 10px;
    }

    .help-title{
      font-size: 15px;
      margin-bottom: 8px;
    }

    .help-desc{
      font-size: 13px;
    }

  }

</style>

<script>
    import Banner from "../../../common/component/Banner";
    import Util from "util";
    import API  from "api";

    export default{
        data(){
            return{
                imgList : [],
                helpList : []
            }
        },

        computed : {
           storeImgStyle : function(){
             return Util.Location.ratioElementForWindow(storeImgRadio);
          }
        },
        methods : {
          forwardDetail : function(item){
              Util.Storage.setSgObj("helpDetail",item);
              window.getRouter().push({
                path : `/help/helpDetail/${item.id}`
              })

          }
        },
        mounted : function(){
            //加载帮助文档
            API.biz.getHelpDoc()
              .then((res)=>{
                  this.helpList = res.bizData;
              });

               //加载banner
            API.biz.getBannerListByType("INDEX_PAGE")
              .then((res)=>{
                  this.imgList = res.bizData.map((banner)=>{
                      banner.url = banner.picUrl;
                      banner.link = banner.pageUrl;
                      return banner;
                  });
              });


        },
        components:{
            Banner
        }
    }


</script>

